<template>
	<view :class="['shop-dateil-packbox', 'flex-justify-content-center', 'flex-wrap', senceFrom === 'newer' ? 'newer-shop-dateil' : '']"
		v-if="goodProductList && goodProductList.length">
		<view :class="['shop-dateil-info', 'relative', senceFrom === 'newer' ? 'newer-shop-info' : '']" 
			v-for="(item, index) in goodProductList" :key="index" @click="gooShopDetailFun(item, index)">
			<view class="info-img relative">
				<comPlaceImage
					class="info-img-cover"
					:class="!item.remain_stock_num ? 'info-img-disable' : ''" 
					:src="item.reward_item_cover"
					style="display: block;"
					:lazyLoad="true" 
					mode="heightFix"></comPlaceImage>
				
				<image class="bg" :class="!item.remain_stock_num ? 'info-img-disable' : ''"
					:src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/border-` + (item.reward_item_type && item.reward_item_type.toLowerCase()) + '.png'"
					mode=""
				></image>
				
				<image class="info-img-type absolute" :src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/level-` + (item.reward_item_type && item.reward_item_type.toLowerCase()) + '.png'" mode="heightFix"></image>
			</view>
			
			<view class="info-name-txt truncate text-nowrap">
				{{ item.reward_item_name||'' }}
			</view>
		</view>
		
		<comEmptyData v-if="goodProductList && !goodProductList.length && !isLoading" />
		<comLoading style="width: 100%;height: 100%;" v-if="isLoading"></comLoading>
	</view>
</template>

<script>
	export default {
		name: 'comShopDetail',
		props: {
			isLoading:{
				type:Boolean,
				default:()=>true
			},
			senceFrom: {
				type: String,
				default: () => '',
			},
			goodProductList: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				
			}
		},
		computed: {
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
		},
		methods: {
			showNoticeTxtFun(name, len) {
				if (name) {
					var namelen = name.length, sum = 0; 
					for (var i = 0; i < namelen; i++) {
						// 中文: 字符编码大于255
						if (name.charCodeAt(i) > 255) {  
							sum += 2;  // 双字节, 累加2
						} else {
							sum++;  // 单字节, 累加1
						}
					}
					if (sum > len*2) {
						return name;
					}
				}
			},
			gooShopDetailFun(item, index) {
				this.$emit('gooShopDetailFun', index);
			},
		}
	};
</script>

<style scoped lang="scss">
	.shop-dateil-packbox {
		padding: 0 6rpx;
		
		.newer-shop-dateil {
			padding: 0 6rpx 0 16rpx;
		}
		
		.shop-dateil-info {
			font-size: 20rpx;
			width: 150rpx;
			margin: 10rpx 14rpx 20rpx;
			
			.info-img {
				padding: 8rpx;
				.info-img-cover {
					border-radius: 8rpx;
					width: 100%;
					height: 190rpx;
					z-index: 1;
					margin-top: 20rpx;
				}

				.info-img-disable {
					filter: grayscale(90%);
					-webkit-filter: grayscale(90%);
					-moz-filter: grayscale(90%);
					-ms-filter: grayscale(90%);
					-o-filter: grayscale(90%);
				}
				
				.info-img-type {
					left: -6rpx;
					top: -16rpx;
					width: 54rpx;
					height: 28rpx;
				}
			}

			.info-name-txt {
				margin-top: 10rpx;
				height: 30rpx;
				color: #111111;
				font-size: 22rpx;
			}
		}
		
		.newer-shop-info {
			width: 104rpx;
			height: 147rpx;
			margin: 12rpx 4rpx 18rpx;
			font-size: 18rpx;
			
			.info-img	{
				width: 104rpx;
				height: 147rpx;
				padding: 20rpx 8rpx 10rpx;
				
				.info-img-cover {
					width: 80rpx;
					height: 84rpx;
					z-index: 1;
				}
				
				.info-img-type {
					left: 10rpx;
					top: 10rpx;
					width: 54rpx;
					height: 28rpx;
				}
			}

			.info-name-txt {
				height: 30rpx;
				color: #111111;
				font-size: 16rpx;
				position: absolute;
				bottom: 4rpx;
				width: 100%;
				text-align: center;
				// margin-top: 10rpx;
			}
		}
		
	}
</style>
